<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
    <meta name="format-detection" content="telephone=no">
<title>行情</title>
<link rel="stylesheet" href="{{asset('/api/static/css/base.css')}}">
<link rel="stylesheet" href="{{asset('/api/static/css/index.css')}}">
<script>
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
      };
    recalc(); 
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
</script>

</head>
<body>
<div class="marketList" id="message_count">
  @foreach($btc as $item)
    @if( $item['gains_type']==0 )
    <a href="javascript:void(0);" onclick="ttp.kDataCoinName('{{$item['id']}}','{{$item['name_en']}}')" class="rise">
    @else
    <a href="javascript:void(0);" onclick="ttp.kDataCoinName('{{$item['id']}}','{{$item['name_en']}}')" class="fall">
    @endif
      <div class="fl BBlogo"><img src="{{$item['logo']}}"></div>
      <div class="fl BBinfo">
        <h3>{{$item['name_en']}}/USDT</h3>
        <p>最新价格 {{$item['lasted_price']}}</p>
      </div>
      <div class="fr">{{$item['gains']}}</div>
    </a>
  @endforeach
</div>
<script src="{{ asset('/js/jquery-3.1.1.js') }}"></script>
<script src="{{ asset('/js/socket.io.js') }}"></script>
<script>
  function html2Escape(sHtml) {
      return sHtml.replace(/[<>&"]/g,function(c){return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];});
  }

  function escape2Html(str) {
      var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
      return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
  }
  var socket = io('https://a.51tuanli.com:2120');
  uid = 9999;
  socket.on('connect', function(){
      socket.emit('login', uid);
  });
  // 后端推送来消息时
  socket.on('new_msg', function(msg){
      var text = escape2Html(msg);
      var json = JSON.parse(text);
      console.log(json);

      var html='';
      for (var i=0; i<json.length;i++) {
        console.log( parseFloat(json[i].gains), json[i].name_en )
        var js_id = "'"+parseInt(json[i].id)+"'";
        var js_name = "'"+json[i].name_en.toUpperCase()+"'";
        var js_name1 = json[i].name_en;
        if( json[i].gains_type==0 ){
          html += '<a href="javascript:void(0);" onclick="ttp.kDataCoinName('+js_id+','+js_name+')" class="rise">'+
                  '<div class="fl BBlogo"><img src="'+json[i].logo+'"></div>'+
                  '<div class="fl BBinfo">'+
                  '<h3>'+js_name1+'/USDT</h3>'+
                  '<p>最新价格'+json[i].lasted_price+'</p>'+
                  '</div>'+
                  '<div class="fr">'+json[i].gains+'</div>'+
                  '</a>'
        } else {
          html += '<a href="javascript:void(0);" onclick="ttp.kDataCoinName('+js_id+','+js_name+')" class="fall">'+
                  '<div class="fl BBlogo"><img src="'+json[i].logo+'"></div>'+
                  '<div class="fl BBinfo">'+
                  '<h3>'+js_name1+'/USDT</h3>'+
                  '<p>最新价格'+json[i].lasted_price+'</p>'+
                  '</div>'+
                  '<div class="fr">'+json[i].gains+'</div>'+
                  '</a>'
        }
        
      }
      $('#message_count').html(html);
  });
</script>
</body>
</html>
